<template>
  <div class="fenleiguanli">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <div class="flex">
            <el-button @click="tianjia()" style="background:#F72C50;border-radius:12px;border:none;color:white;margin-left:30px">添加评论模板</el-button>
          </div>
          <div class="zhiboxitong_table">
            <el-table :data="list" border style="width: 100%" align="left" :header-cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD' }"
            :cell-style="{fontSize: '14px', backgroundColor: '#F8F9FD'}">
              <el-table-column prop='id' label="ID" align="left"></el-table-column>
              <el-table-column prop='title' label="评论模板名称" align="left"></el-table-column>
              <el-table-column prop='created_at' label="创建时间" align="left"></el-table-column>
              <el-table-column label="操作" align="left">
                <template slot-scope="scope">
                  <div class="handle_btn">
                  <div @click="bianji(scope.row)" style="color:#005AFF;font-size:14px">编辑</div>
                  <div @click="go(scope.row.id)" style="color:#005AFF;font-size:14px;margin:0 15px">管理评论内容</div>
                  <div @click="shanchu(scope.row.id)" style="color:#005AFF;font-size:14px">删除</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right; padding: 10px 0;">
              <el-pagination background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size"
               :total="total"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="编辑评论模板" :visible.sync="log" :close-on-press-escape="false" :close-on-click-modal="false" width="700px">
      <div class="flexc">
        <div style="margin-right: 20px;">评论模板名称：</div>
        <el-input v-model="fenleiall.title" style="width: 220px;" placeholder="请输入评论模板名称"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false" style=" border-radius: 12px;">取消</el-button>
        <el-button @click="tongbugo" :disabled="tongbugoing" style=" border-radius: 12px;background:#005AFF;color:white;border:none">确认</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  export default {
    components: {
      top,left
    },
    name: "fenleiguanli",
    data() {
      return {
          list:[],
          log:false,
          tongbugoing:false,

          all:{
            page:1,
            page_size:20
          },

          fenleiall:{
            title:"",
            id:""
          }
      }
    },
    created() {
      this.getlist()
    },
    mounted() {

    },
    methods: {
      go:function(id){
        this.$router.push('/zhiboxitong/pinglunguanli/pinglunguanlilist?id='+id)
      },
      tongbugo:function(){
        this.tongbugoing = true
        axios.post(`${this.apis}/api/comment/template/set`,this.fenleiall)
          .then(response => {
            if(response.data.msg.code == 0){
              this.getlist()
              this.$message.success('操作成功');
              this.log = false
              setTimeout(()=>{
                this.tongbugoing = false
              },500)
              
            }else{
              this.$message.error(response.data.msg.info);
              this.tongbugoing = false
            }
          });
      },

      shanchu:function(id){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`${this.apis}/api/comment/template/delete`,{id:id})
            .then(response => {
              if(response.data.msg.code == 0){
                this.getlist()
                this.$message.success('已删除');
              }else{
                this.$message.error(response.data.msg.info);
              }
            });
        })
      },
      fanye:function(page){
        this.all.page = page
        this.getlist()
      },

      getlist:function(){
        axios.get(`${this.apis}/api/comment/template/list`,{params:this.all})
          .then(response => {
            if(response.data.msg.code == 0){
              this.list = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      tianjia:function(){
        this.fenleiall = {
          title:"",
          id:""
        }
        this.log = true
      },
      bianji:function(item){
          this.fenleiall =  JSON.parse(JSON.stringify(item))
          this.log = true
      }

    }
  }
</script>

<style scoped lang="less">
/deep/ .el-table{
  background-color: #F8F9FD;
}
/deep/ .el-table__body tr td:first-child {
  border-radius: 20px 0 0 20px;
  padding-left: 10px;
  box-sizing: border-box;
}
/deep/ .el-table__body tr td:last-child {
  border-radius: 0 20px 20px 0;
}
.handle_btn{
  display: flex;
  cursor: pointer;
}
// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover > td {
  background-color: white !important;
}
.jinggao_image{
  margin-right: 5px;
  width: 20px;
  height: 20px;
}
//去掉每行的下边框
  /deep/ .el-table td.el-table__cell,/deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: none;
  } 
 
// 去掉表格单元格边框
.customer-table th{
    border:none;
  }
.customer-table td,.customer-table th.is-leaf {
  border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
/deep/ .el-table__body td{
 height: 72px;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{
  width: 0;
}
.customer-table::before{
  width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
// 表格有滚动时表格头边框
// .el-table--border th.gutter:last-of-type {
//     border: 1px solid #EBEEF5;  
//     border-left: none;
// }
// 去除边框线
/deep/ .el-table::before {
    height: 0;
}

  .fenleiguanli {
    // background: #f2f2f2;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100%;}
      .right{ width: calc(100vw - 220px);
       overflow: auto;height: 100vh;
        .zhiboxitong_right{
           height: calc(100vh - 90px); overflow: auto; border-radius: 5px; padding: 20px;
        }
        .zhiboxitong_table{ margin-top: 20px;
        border-top-left-radius: 30px;
        padding: 30px;
        background: #F8F9FD;
        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
    /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
  font-size: 20px;
  font-weight: bold; /* 修改标题字体大小 */
}
</style>
